<template>
  <div class="select-wrap" :class="{ 'show-select': showSelect }" @click.capture="showSelect = !showSelect">
    <div class="select-selected">
      <span>{{ selectItem?.label }}</span>
      <i class="duration-500 fa-solid fa-caret-down" :class="{ 'rotate-180': showSelect }"></i>
    </div>
    <section class="select-list-content">
      <div
        v-for="item in list"
        class="select-list-item"
        :class="{ 'item-active': item.value === selectItem?.value }"
        @click.stop="select(item)">
        {{ item.label }}
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits(['select']);
const props = defineProps({
  list: {
    type: Array as PropType<{ label: string; value: string }[]>,
    default: () => [],
  },
});
const selectItem = ref(props.list[0]);
const showSelect = ref(false);
const select = (item: { label: string; value: string }) => {
  selectItem.value = item;
  showSelect.value = false;
  emit('select', item);
};

watch(
  () => props.list,
  () => {
    selectItem.value = props.list[0];
  },
);
</script>

<style scoped lang="scss">
.select-wrap {
  position: relative;
  width: 16rem;
  color: #ccc;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  .select-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    background-image: -webkit-gradient(
      linear,
      100% 100%,
      0% 0%,
      from(transparent),
      color-stop(0.25, transparent),
      color-stop(0.25, hsla(0, 0%, 100%, 0.12)),
      color-stop(0.5, hsla(0, 0%, 100%, 0.12)),
      color-stop(0.5, transparent),
      color-stop(0.75, transparent),
      color-stop(0.75, hsla(0, 0%, 100%, 0.12)),
      to(hsla(0, 0%, 100%, 0.12))
    );
    background-image: -webkit-linear-gradient(
      right bottom,
      transparent 0%,
      transparent 25%,
      hsla(0, 0%, 100%, 0.12) 25%,
      hsla(0, 0%, 100%, 0.12) 50%,
      transparent 50%,
      transparent 75%,
      hsla(0, 0%, 100%, 0.12) 75%,
      hsla(0, 0%, 100%, 0.12) 100%
    );
    background-color: #222;
    background-size: 2px 2px;
    box-shadow:
      inset 0 -1px 0 #000,
      inset 0 2px 8px rgba(0, 0, 0, 0.5),
      inset 0 0 40px 5px rgba(0, 0, 0, 0.25);
    border: 0.2rem solid #353535;
    border-radius: 2rem;
  }
  .select-list-content {
    position: absolute;
    top: -0.5rem;
    width: 100%;
    padding: 0.5rem 0.3rem 0.3rem;
    max-height: 0;
    background-color: #323232;
    transform: translateY(-100%);
    transition: all 0.3s;
    border-radius: 2rem;
    overflow: hidden;
    opacity: 0;
    .select-list-item {
      padding: 0.8rem 1rem;
      margin-top: 0.2rem;
      border-radius: 2rem;
    }
    .item-active {
      color: #000;
      animation: bg-pulse 2s infinite;
    }
  }
}
.show-select {
  .select-selected {
    position: relative;
    &::after {
      --w: 6px;
      --h: 6px;
      position: absolute;
      bottom: 0;
      right: 0;
      content: '';
      width: calc(100% + var(--w) * 2);
      height: calc(100% + var(--h) * 2);
      border-radius: 2rem;
      animation:
        button-pulse 1s infinite,
        bg-pulse 2s infinite;
      z-index: -1;
    }
  }
  .select-list-content {
    max-height: 100vh;
    opacity: 1;
  }
  @keyframes button-pulse {
    0% {
      transform: translateX(var(--w)) translateY(var(--h)) scale(1);
    }
    50% {
      transform: translateX(var(--w)) translateY(var(--h)) scaleY(1.1) scaleX(1.02);
    }
    100% {
      transform: translateX(var(--w)) translateY(var(--h)) scale(1);
    }
  }
  @keyframes bg-pulse {
    0% {
      transform: translateX(var(--w)) translateY(var(--h)) scale(1);
      background: #d7d000;
    }
    25% {
      background: #a5d700;
    }
    50% {
      background: #75b801;
    }
    75% {
      background: #a5d700;
    }
    100% {
      background: #d7d000;
    }
  }
}
</style>
